<template>
  <view>
    <view v-if="rankingItem.ranking == 1" :class="['buy_box', backShow? 'buy_box_background1' : 'buy_box_background11']"
      @click="navTo('/subpkg/productdetails/productdetails?id=' + rankingItem.id)">
      <view class="buy_box_left">
        <view class="buy_box_left_title buy_box_left_first">
          {{rankingItem.ranking > 9? rankingItem.ranking : '0' +  rankingItem.ranking}}.
        </view>
        <text class="iconfont iconhuangguan"></text>
        <view class="buy_box_left_img">
          <image :src="rankingItem.previewImage" mode="aspectFill"></image>
        </view>
        <view class="buy_box_left_box">
          <h1>{{rankingItem.productName}}</h1>
          <view class="buy_box_left_box_text">
            <text>{{rankingItem.categoryName? rankingItem.categoryName : '未知'}}</text>
            <text class="Textmargin">｜</text>
            <text>{{rankingItem.buyers}}人想买</text>
          </view>
        </view>
      </view>
      <view class="buy_box_right">
        <text class="buy_box_right_text">{{rankingItem.score}}</text>
        <text>{{rankingItem.scores}}人评分</text>
      </view>
    </view>
    <view v-else-if="rankingItem.ranking == 2"
      :class="['buy_box', backShow? 'buy_box_background2' : 'buy_box_background11']"
      @click="navTo('/subpkg/productdetails/productdetails?id=' + rankingItem.id)">
      <view class="buy_box_left">
        <view class="buy_box_left_title buy_box_left_second">
          {{rankingItem.ranking > 9? rankingItem.ranking : '0' +  rankingItem.ranking}}.
        </view>
        <text class="iconfont iconhuangguan buy_box_left_second"></text>
        <view class="buy_box_left_img">
          <image :src="rankingItem.previewImage" mode="aspectFill"></image>
        </view>
        <view class="buy_box_left_box">
          <h1>{{rankingItem.productName}}</h1>
          <view class="buy_box_left_box_text">
            <text>{{rankingItem.categoryName? rankingItem.categoryName : '未知'}}</text>
            <text class="Textmargin">｜</text>
            <text>{{rankingItem.buyers}}人想买</text>
          </view>
        </view>
      </view>
      <view class="buy_box_right">
        <text class="buy_box_right_text">{{rankingItem.score}}</text>
        <text>{{rankingItem.scores}}人评分</text>
      </view>
    </view>
    <view v-else-if="rankingItem.ranking == 3"
      :class="['buy_box', backShow? 'buy_box_background3' : 'buy_box_background11']"
      @click="navTo('/subpkg/productdetails/productdetails?id=' + rankingItem.id)">
      <view class="buy_box_left">
        <view class="buy_box_left_title buy_box_left_thirdly">
          {{rankingItem.ranking > 9? rankingItem.ranking : '0' +  rankingItem.ranking}}.
        </view>
        <text class="iconfont iconhuangguan buy_box_left_thirdly"></text>
        <view class="buy_box_left_img">
          <image :src="rankingItem.previewImage" mode="aspectFill"></image>
        </view>
        <view class="buy_box_left_box">
          <h1>{{rankingItem.productName}}</h1>
          <view class="buy_box_left_box_text">
            <text>{{rankingItem.categoryName? rankingItem.categoryName : '未知'}}</text>
            <text class="Textmargin">｜</text>
            <text>{{rankingItem.buyers}}人想买</text>
          </view>
        </view>
      </view>
      <view class="buy_box_right">
        <text class="buy_box_right_text">{{rankingItem.score}}</text>
        <text>{{rankingItem.scores}}人评分</text>
      </view>
    </view>
    <view v-else :class="['buy_box', backShow? 'buy_box_background4' : 'buy_box_background11']"
      @click="navTo('/subpkg/productdetails/productdetails?id=' + rankingItem.id)">
      <view class="buy_box_left">
        <view class="buy_box_left_title">
          {{rankingItem.ranking > 9? rankingItem.ranking : '0' +  rankingItem.ranking}}.
        </view>
        <!-- <text class="iconfont iconhuangguan buy_box_left_else"></text> -->
        <view class="buy_box_left_img">
          <image :src="rankingItem.previewImage" mode="aspectFill"></image>
        </view>
        <view class="buy_box_left_box">
          <h1>{{rankingItem.productName}}</h1>
          <view class="buy_box_left_box_text">
            <text>{{rankingItem.categoryName? rankingItem.categoryName : '未知'}}</text>
            <text class="Textmargin">｜</text>
            <text>{{rankingItem.buyers}}人想买</text>
          </view>
        </view>
      </view>
      <view class="buy_box_right">
        <text class="buy_box_right_text">{{rankingItem.score}}</text>
        <text>{{rankingItem.scores}}人评分</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "pet_ranking",
    data() {
      return {

      };
    },
    props: {
      rankingItem: {
        type: Object,
        default: {}
      },
      backShow: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss">
  .buy_box:last-child {
    border: none;
  }

  .buy_box_background1 {
    background: linear-gradient(270deg, rgba(255, 195, 0, 0) 0%, rgba(255, 195, 0, 0.1) 100%);
    border: none !important;
    padding-left: 24rpx !important;
    padding-right: 24rpx !important;
  }

  .buy_box_background11 {
    border-bottom: 1px solid #f5f5f5 !important;
  }

  .buy_box_background2 {
    background: linear-gradient(270deg, rgba(169, 174, 190, 0) 0%, rgba(169, 174, 190, 0.1) 100%);
    border: none !important;
    padding-left: 24rpx !important;
    padding-right: 24rpx !important;
  }

  .buy_box_background3 {
    background: linear-gradient(270deg, rgba(255, 127, 83, 0) 0%, rgba(255, 127, 83, 0.1) 100%);
    border: none !important;
    padding-left: 24rpx !important;
    padding-right: 24rpx !important;
  }

  .buy_box_background4 {
    padding-left: 24rpx !important;
    padding-right: 24rpx !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }

  // 想买
  .buy_box {
    // height: 160rpx;
    border-bottom: 1px solid rgba(61, 61, 61, 0.1);
    // border-radius: 15px;
    // padding: 45rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 45rpx 0rpx;
    // margin-top: 14rpx;
    background-color: #fff;

    .buy_box_left {
      position: relative;
      display: flex;
      align-items: center;

      .buy_box_left_title {
        color: rgba(61, 61, 61, 1);
        font-size: 32rpx;
        font-weight: bold;
        font-style: italic;
        margin-right: 15rpx;
      }

      .buy_box_left_first {
        color: rgba(255, 195, 0, 1);
      }

      .buy_box_left_second {
        color: rgba(169, 174, 190, 1) !important;
      }

      .buy_box_left_thirdly {
        color: rgba(255, 127, 83, 1) !important;
      }

      .buy_box_left_else {
        color: rgba(61, 61, 61, 1) !important;
      }

      .iconfont {
        position: absolute;
        z-index: 1;
        top: -8rpx;
        left: 56rpx;
        color: rgba(255, 195, 0, 1);
      }

      .buy_box_left_img {
        position: relative;
        z-index: 10;
        width: 94rpx;
        height: 94rpx;
        border-radius: 50%;
        overflow: hidden;
        background-color: #fff;

        image {
          position: relative;
          z-index: 10;
          width: 100%;
          height: 100%;
        }
      }

      .buy_box_left_box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 17rpx;

        h1 {
          color: rgba(61, 61, 61, 1);
          font-size: 30rpx;
        }

        .buy_box_left_box_text {
          color: rgba(61, 61, 61, 0.6);
          font-size: 22rpx;
          margin-top: 8rpx;

          .Textmargin {
            margin: 0 10rpx;
          }
        }
      }
    }

    .buy_box_right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      color: rgba(61, 61, 61, 0.3);
      font-size: 22rpx;

      .buy_box_right_text {
        color: rgba(255, 102, 102, 1);
        font-size: 44rpx;
        font-style: italic;
      }
    }
  }
</style>
